function _boxAdder(boxContainer_id, childBox) {
    var container = document.getElementById(boxContainer_id);
    if (container) container.appendChild(childBox);
    else setInterval(function () { _boxAdder(boxContainer_id, childBox) }, 2000);
    childBox.scrollIntoView()
    return
}


class BaseMessageBox {
    constructor(icon_name, message) {
        let This = this;
        this.messageBox_box = document.createElement("div"),
            this.messageBox_icon = document.createElement('img'),
            this.messageBox_closeButton = document.createElement('div'),
            this.messageBox_message = document.createElement('div');
        $(this.messageBox_box).css("opacity", "0.9");
        $(this.messageBox_box).animate({ "opacity": "0.1" }, 5000, function () { $(This.messageBox_box).remove(); });
        this.messageBox_box.onmouseenter = function () {
            $(This.messageBox_box).stop(true);
            $(This.messageBox_box).css("opacity", "0.9");
        }
        this.messageBox_box.onmouseleave = function () {
            $(This.messageBox_box).animate({ "opacity": "0.1" }, 5000, function () { $(This.messageBox_box).remove(); });
        }
        this.messageBox_closeButton.onclick = function () { $(This.messageBox_box).remove(); }
        this.messageBox_box.className = "messageBox-box";
        this.messageBox_icon.className = "messageBox-icon";
        this.messageBox_closeButton.className = "messageBox-closeButton";
        this.messageBox_message.className = "messageBox-message";
        this.messageBox_message.innerHTML = message;
        this.messageBox_closeButton.innerHTML = "X";
        if (status_icon_recv_ok) { this.messageBox_icon.src = localStorage.getItem(icon_name + ".ico"); }
        else { this.messageBox_icon.src = "/static/images/status-icons/" + icon_name + ".ico"; }
        this.messageBox_box.appendChild(this.messageBox_icon);
        this.messageBox_box.appendChild(this.messageBox_message);
        this.messageBox_message.appendChild(this.messageBox_closeButton);
        _boxAdder("messageBar-main", this.messageBox_box);
    }
}
function errorBox(message) {
    new BaseMessageBox('error', message);
}
function warningBox(message) {
    new BaseMessageBox('warning', message);
}
function questionBox(message) {
    new BaseMessageBox('question', message);
}
function noteBox(message) {
    new BaseMessageBox('note', message);
}
function successBox(message) {
    new BaseMessageBox('success', message);
}

function emptyBox() {
    $("#messageBar-main").empty();
}

class BaseProcessBox {
    constructor(_message = 'default', _num = 0, _all = '?') {
        this.message = _message;
        this.num = _num;
        this.all = _all;
        this.alreadyShow = false;
        this.processBox_topBox = document.createElement('div');
        this.processBox_bottomBox = document.createElement('div');
        this.processBox_box = document.createElement("div");
        this.processBox_icon = document.createElement('img');
        this.processBox_message = document.createElement('div');
        this.processBox_processBar = document.createElement('div');
        this.processBox_process = document.createElement('div');
        this.processBox_process_bgColor = document.createElement('div');
        this.processBox_processText = document.createElement('span');
    }

    __createBox(icon_name) {
        this.processBox_topBox.className = "processBox-topBox";
        this.processBox_bottomBox.className = "processBox-bottomBox";
        this.processBox_box.className = "processBox-box";
        this.processBox_icon.className = "processBox-icon";
        this.processBox_message.className = "processBox-message";
        this.processBox_processBar.className = "processBox-processBar";
        this.processBox_process.className = "processBox-process";
        this.processBox_process_bgColor.className = "processBox-process-bgColor";
        this.processBox_processText.className = "processBox-processText";
        if (status_icon_recv_ok) { this.processBox_icon.src = localStorage.getItem(icon_name + ".ico"); }
        else { this.processBox_icon.src = "/static/images/status-icons/" + icon_name + ".ico"; }
        this.processBox_message.innerHTML = this.message;
        $(this.processBox_box).css("opacity", "0.9");
        this.processBox_processText.innerText = String(this.num) + "/" + String(this.all);
        this.processBox_topBox.appendChild(this.processBox_icon);
        this.processBox_topBox.appendChild(this.processBox_message);
        this.processBox_process.appendChild(this.processBox_process_bgColor);
        this.processBox_processBar.appendChild(this.processBox_process);
        this.processBox_bottomBox.appendChild(this.processBox_processBar);
        this.processBox_bottomBox.appendChild(this.processBox_processText);
        this.processBox_box.appendChild(this.processBox_topBox);
        this.processBox_box.appendChild(this.processBox_bottomBox);
        _boxAdder("messageBar-main", this.processBox_box);
        this.alreadyShow = true;
    }

    show() {
        if (this.alreadyShow) return this;
        this.__createBox(this.icon_name);
        $(this.processBox_processBar).width($(this.processBox_processBar).width());
        return this;
    }

    close() {
        if (!this.alreadyShow) return this;
        this.processBox_box.remove();
        this.alreadyShow = false;
        this.processBox_topBox = document.createElement('div');
        this.processBox_bottomBox = document.createElement('div');
        this.processBox_box = document.createElement("div");
        this.processBox_icon = document.createElement('img');
        this.processBox_message = document.createElement('div');
        this.processBox_processBar = document.createElement('div');
        this.processBox_process = document.createElement('div');
        this.processBox_process_bgColor = document.createElement('div');
        this.processBox_processText = document.createElement('span');
        return this;
    }

    update(_num = 1) {
        this.num += _num;
        this.processBox_processText.innerText = String(this.num) + "/" + String(this.all);
        $(this.processBox_process).stop(true);
        $(this.processBox_process).animate({
            "width": $(this.processBox_processBar).width() * (this.num / this.all)
        }, 'fast');
        $(this.processBox_process_bgColor).width($(this.processBox_processBar).width());
        return this.checkFinish();
    }

    changeAll(_all = 1) {
        this.all += _all;
        this.processBox_processText.innerText = String(this.num) + "/" + String(this.all);
        return this.checkFinish();
    }

    changeMessage(_message) {
        this.message = _message;
        this.processBox_message.innerHTML = this.message;
        return this;
    }
    remove() {
        delete this;
        return undefined;
    }

    changeIcon(_icon_name) {
        this.icon_name = _icon_name;
        if (status_icon_recv_ok) { this.processBox_icon.src = localStorage.getItem(_icon_name + ".ico"); }
        else { this.processBox_icon.src = "/static/images/status-icons/" + _icon_name + ".ico"; }
        return this;
    }

    checkFinish() {
        let copyThis = this;
        if (copyThis.num === copyThis.all) {
            this.changeIcon('success');
            this.changeMessage("成功!");
            $(copyThis.processBox_box).animate({ "opacity": "0.1" }, 5000, function () { $(copyThis.processBox_box).remove(); });
            copyThis.processBox_box.onmouseenter = function () {
                $(copyThis.processBox_box).stop(true);
                $(copyThis.processBox_box).css("opacity", "0.9");
            }
            this.processBox_box.onmouseleave = function() {
                $(copyThis.processBox_box).animate({ "opacity": "0.1" }, 5000, function () { $(copyThis.processBox_box).remove(); });
            }
            copyThis.remove();
            return true;
        }
        return false;
    }
}



function saveProcessBox(_message = 'default', _num = 0, _all = -1) {
    return new BaseProcessBox(_message, _num, _all).changeIcon('save');
}

class BaseWaitBox {
    constructor(_message = 'default') {
        this.message = _message,
        this.alreadyShow = false;
        this.waitingBox_box = document.createElement("div");
        this.waitingBox_message = document.createElement('div');
        this.waitingBox_waitingBar = document.createElement('div');
        this.waitingBox_waiting = document.createElement('div');
    }

    show() {
        if (this.alreadyShow) return this;
        this.waitingBox_box.className = "waitingBox-box";
        this.waitingBox_message.className = "waitingBox-message";
        this.waitingBox_waitingBar.className = "waitingBox-waitingBar";
        this.waitingBox_waiting.className = "waitingBox-waiting";
        this.waitingBox_message.innerHTML = this.message;
        $(this.waitingBox_box).css("opacity", "0.9");
        this.waitingBox_waitingBar.appendChild(this.waitingBox_waiting);
        this.waitingBox_box.appendChild(this.waitingBox_message);
        this.waitingBox_box.appendChild(this.waitingBox_waitingBar);
        this.__animateContinue(this);
        _boxAdder("messageBar-main", this.waitingBox_box);
        this.alreadyShow = true;
        return this;
    }

    close() {
        if (!this.alreadyShow) return this;
        this.waitingBox_box.remove();
        this.alreadyShow = false;
        this.waitingBox_box = document.createElement("div");
        this.waitingBox_message = document.createElement('div');
        this.waitingBox_waitingBar = document.createElement('div');
        this.waitingBox_waiting = document.createElement('div');
        return this;
    }

    __animateContinue(This) {
        $(This.waitingBox_waiting).animate({ "left": "250px" }, 3000, function () {
            $(This.waitingBox_waiting).css("left", "-50px");
            This.__animateContinue(This);
        });

    }

    changeMessage(_message) {
        this.message = _message;
        this.waitingBox_message.innerHTML = this.message;
        return this;
    }

    remove() {
        delete this;
        return undefined;
    }
}

function waitBox(_message) {
    return new BaseWaitBox(_message);
}